<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" th:href="@{/favicon.png}"/>
    <link rel="bookmark" th:href="@{/favicon.png}"/>
    <title th:text="#{index.title}">不挂高数社区</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link rel="stylesheet" href="/css/index.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" type="text/javascript"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <style type="text/css">
        body {
            /*background-image: url("https://api.isoyu.com/bing_images.php");*/
            background-color: #efefef;
        }

        .issue-right {
            border-right-style: solid;
            border-right-width: 1px;
            border-right-color: #efefef;
        }

        a:hover {
            text-decoration: none;
        }

        .my-nav {
            background-color: #efefef;
            color: black;
            border-radius: 10px;
        }

        .my-nav-active {
            background: #494a4b;
            color: white;
        }

        .my-nav:hover {
            background-color: #494a4b;
            color: white;
        }

        .hot-tag {
            background-color: #99cfff;
        }

        .hot-tag:hover {
            background-color: #23527c;
        }

        .hot-question {
            padding: 5px;
        }

        <
        /
        style >
    </style>
</head>
<body>
<!-- 标题栏 使用  fixed-top 将标题栏固定在顶部 -->
<div th:insert="~{navigation :: navbar}"></div>


<div class="container" style="height: 30px">
</div>
<!-- 帖子列表显示 -->
<div class="container shadow-sm" style="background-color: white;">
    <div class="row">
        <!-- 左边 -->
        <div class="col-xl-9 mt-3 issue-right">
            <!-- 帖子列表头 -->
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h4>
                            <img src="/image/icon/search.svg" width="35" height="35"/>
                            搜索结果
                        </h4>
                    </div>
                    <div class="col-7">
                        <ul class="nav justify-content-end">
                            <li class="nav-item">
                                <a class="nav-link" th:href="${'/search/'+paginationDto.search}">问题</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" th:href="${'/search/' + paginationDto.search} + '/user'">用户</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <hr style="margin-top: 0%;">
            </div>
            <div class="content mt-2 mb-2">共找到 &nbsp; <span th:text="${paginationDto.allCount}"></span> &nbsp; 条与
                &nbsp; <span th:text="${paginationDto.search}"></span>&nbsp;
                相关用户
                <hr/>
            </div>

            <!-- 用户 -->
            <div th:if="${paginationDto != null}" th:each="user : ${paginationDto.data}">
                <div class="media">
                    <a class="link-to-text" th:href="'/user/' + ${user.getUserId()}"><img
                            class="align-self-center mr-3 img-fluid rounded-circle" th:src="${user.getHeadUrl()}"
                            src="image/head/boyhead.png"
                            style="max-width: 64px; height: auto; "></a>
                    <div class="media-body">
                        <h5 class="mt-0"><a class="link-to-text" th:href="'/user/' + ${user.getUserId()}"
                                            th:text="${user.getUserName()}">中间对齐

                        </a>
                            <span class="ml-4" style="font-size: 15px">用户邮箱：<span
                                    th:text="${user.getEmail()}"></span></span>
                        </h5>
                        <p class="mb-1" th:text="${user.getSimpleSelfIntroduction()}"></p>
                        <p class="mb-1" th:text="${user.getSelfIntroduction()}">Cras sit amet nibh libero</p>
                    </div>
                </div>
                <hr/>
            </div>

            <!-- 页码 -->
            <nav aria-label="Page navigation example" th:if="${paginationDto.totalPage} != 0">
                <ul class="pagination justify-content-end">
                    <!-- 返回首页 -->
                    <li class="page-item" th:if="${paginationDto.showFirstPage}">
                        <a class="page-link" id="first-page-a" th:href="'/search/' + ${paginationDto.search} + '/user'"
                           aria-label="Previous" onclick="addLocaleUrlForPage('first-page-a')">
                            <span aria-hidden="true">&laquo;&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>
                    <!-- 上一页 -->
                    <li class="page-item" th:if="${paginationDto.showPrevious}">
                        <a class="page-link" id="link-to-last-a"
                           th:href="'/search/'+ ${paginationDto.search}+'/user' + @{/(page=${paginationDto.nowPage} - 1)}"
                           aria-label="Previous"
                           onclick="addLocaleUrlForPage('link-to-last-a')">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </li>


                    <li class="page-item" th:each="page : ${paginationDto.pages}"
                        th:class="${paginationDto.nowPage == page}? 'page-item active' : 'page-item'">
                        <a class="page-link"
                           th:href="${'/search/'+ paginationDto.search + '/user'} + @{/(page=${page})}"
                           th:text="${page}" th:id="${page}"
                           th:onclick="'javascript:addLocaleUrlForPage(\''+${page}+'\')'">
                            1
                        </a>
                    </li>


                    <!-- 下一页 -->
                    <li class="page-item" th:if="${paginationDto.showNext}">
                        <a class="page-link" id="lind-to-next-a"
                           th:href="'/search/'+${paginationDto.nowPage + '/user'} + @{/(page=${paginationDto.nowPage} + 1)}"
                           aria-label="Next"
                           onclick="addLocaleUrlForPage('lind-to-next-a')">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                    <!-- 最后一页 -->
                    <li class="page-item" th:if="${paginationDto.showEndPage}">
                        <a class="page-link" id="link-to-end-a"
                           th:href="'/search/'+${paginationDto.nowPage + '/user'} + @{/(page=${paginationDto.totalPage})}"
                           th:if="${paginationDto.showEndPage}"
                           aria-label="Next" onclick="addLocaleUrlForPage('link-to-end-a')">
                            <span aria-hidden="true">&raquo;&raquo;</span>
                            <span class="sr-only">Next</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 右边 -->
        <div class="col">
            <br/>
            <div id="Advertisement" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li th:each="ad : ${advertisements}" th:class="${adStat.index == 0} ? 'active' : ''"
                        data-target="#Advertisement" th:data-slide-to="${adStat.index}"></li>
                </ol>
                <div class="carousel-inner">
                    <div th:each="ad : ${advertisements}"
                         th:class="${adStat.index == 0} ? 'carousel-item active' : 'carousel-item'">
                        <a th:href="'/adUrl' + @{/(url=${ad.url},id=${ad.id})}" target="_blank">
                            <img class="d-block w-100" th:src="${ad.image}" th:alt="${ad.title}" th:title="${ad.title}">
                            <div class="carousel-caption d-none d-md-block mb-0" style="border-bottom: 0px">
                                <p class="mb-0" th:text="${ad.title}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#Advertisement" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#Advertisement" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <br/>
            <br/>
            <h5 class="mb-2">
                <img class="mr-2" src="/image/icon/hot-tag.svg" width="20px" height="20px">
                热门标签
            </h5>

            <div class="content">
                <span th:each="tag : ${hots}">
                    <a class="mb-2" th:href="@{/(page=1,tag=${tag},sort=${sort})}">
                        <span class="badge badge-primary hot-tag" th:text="${tag}">Primary</span>
                    </a>
                </span>
            </div>
            <hr/>
            <h5 class="mb-2">
                <img class="mr-2" src="/image/icon/hot-question.svg" width="20px" height="20px">
                热门问题
            </h5>
            <div class="container mt-2" style="padding: 0px;">
                <div class="list-group">
                    <a th:each="hotQuestion : ${hotQuestions}" th:href="${'/question/' + hotQuestion.getQuestionId()}"
                       class="list-group-item list-group-item-action hot-question">
                        <span th:if="${hotQuestionStat.index < 3}" class="badge badge-danger"
                              th:text="${hotQuestionStat.index+1}">Danger</span>
                        <span th:if="${hotQuestionStat.index >= 3}" class="badge badge-secondary"
                              th:text="${hotQuestionStat.index+1}">Danger</span>
                        <span class="ml-2" th:text="${hotQuestion.title}"></span>
                    </a>
                </div>
            </div>

            <br/><br/>
            <p><a class="link-to-text" href="#"><span style="color: red">New!</span>&nbsp;新闻</a></p>
            <!-- 图片轮播 -->
            <div id="news-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li th:each="n : ${news}" data-target="#news-carousel" th:data-slide-to="${nStat.index}"
                        th:class="${nStat.index==0} ? 'active' : ''"></li>
                </ol>
                <div class="carousel-inner">
                    <div th:each="n : ${news}"
                         th:class="${nStat.index == 0} ? 'carousel-item active' : 'carousel-item'">
                        <a th:href="'/adUrl' + @{/(url=${n.url},id=${n.id})}" target="_blank">
                            <img class="d-block w-100" th:src="${n.image}" th:alt="${n.title}" th:title="${n.title}">
                            <div class="carousel-caption d-none d-md-block mb-0" style="border-bottom: 0px">
                                <p class="mb-0" th:text="${n.title}"></p>
                            </div>
                        </a>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#news-carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#news-carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <br/>
        </div>
    </div>
    <div class="container" style="height: 30px">
    </div>
</div>


<!-- 页脚 -->
<div th:insert="~{footer :: footer}"></div>


<script src="/js/url.js" type="text/javascript"></script>
</body>
</html>
